var canvasContainter = document.querySelector("#canvasContainter");

var canvas = document.createElement("canvas");
canvas.width = canvasContainter.clientWidth;
canvas.height = canvasContainter.clientHeight;
canvasContainter.appendChild(canvas);

var gl = canvas.getContext("webgl");

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);

function drawMutiPoints(gl, pointsCollection, type) {
    var VERTEX_SHADER_SOURCE =
        'attribute vec4 a_Position;\n' +
        'void main(){\n' +
        'gl_Position = a_Position;\n' +
        'gl_PointSize = 10.0;\n' +
        '}\n';

    var FRAGMENT_SHADER_SOURCE =
        'void main(){\n' +
        'gl_FragColor = vec4(1.0,1.0,1.0,1.0);\n' +
        '}';

    // 1.创建着色器对象
    var vertex_shader_object = gl.createShader(gl.VERTEX_SHADER);
    var fragment_shader_object = gl.createShader(gl.FRAGMENT_SHADER);

    // 2.装载着色器资源
    gl.shaderSource(vertex_shader_object, VERTEX_SHADER_SOURCE);
    gl.shaderSource(fragment_shader_object, FRAGMENT_SHADER_SOURCE);

    // 3.编译着色器
    gl.compileShader(vertex_shader_object);
    gl.compileShader(fragment_shader_object);

    // 4.创建程序
    var program = gl.createProgram();

    // 5.附着着色器对象到program
    gl.attachShader(program, vertex_shader_object);
    gl.attachShader(program, fragment_shader_object);

    // 6.链接program
    gl.linkProgram(program);

    // 7.使用program
    gl.useProgram(program);

    // 1. 创建float32数组
    var vertices = new Float32Array(pointsCollection);

    // 2. 创建缓冲区对象
    var vertexBuffer = gl.createBuffer();

    // 3. 坐标数组绑定到缓冲区对象
    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

    var a_Position = gl.getAttribLocation(program, "a_Position");

    gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);

    gl.enableVertexAttribArray(a_Position);

    gl.clearColor(.0, .0, .0, 1.0);
    gl.clear(gl.COLOR_BUFFER_BIT);

    if (type == "POINTS") {
        gl.drawArrays(gl.POINTS, 0, pointsCollection.length / 2);
    }else if (type == "LINES") {
        gl.drawArrays(gl.LINES, 0, pointsCollection.length / 2);
    } else if (type == "LINE_STRIP") {
        gl.drawArrays(gl.LINE_STRIP, 0, pointsCollection.length / 2);
    } else if (type == "LINE_LOOP") {
        gl.drawArrays(gl.LINE_LOOP, 0, pointsCollection.length / 2)
    } else if (type == "TRIANGLES") {
        gl.drawArrays(gl.TRIANGLES, 0, pointsCollection.length / 2)
    } else if (type == "TRIANGLE_STRIP") {
        gl.drawArrays(gl.TRIANGLE_STRIP, 0, pointsCollection.length / 2)
    } else if (type == "TRIANGLE_FAN") {
        gl.drawArrays(gl.TRIANGLE_FAN, 0, pointsCollection.length / 2)
    }
};

var select = document.getElementById("select");
select.addEventListener("change", function () {
    var pointsCollection = [];
    if(select.value != "NONE"){
        canvasContainter.addEventListener("click", function (e) {
            var clientX = e.clientX;
            var clientY = e.clientY;
            var x = (clientX - canvas.width / 2) / (canvas.width / 2);
            var y = (canvas.height / 2 - clientY) / (canvas.height / 2);
            pointsCollection.push(x, y);
            drawMutiPoints(gl, pointsCollection,select.value)
        });
    };

});


